<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en">   <![endif]-->
<!--[if IE 7]>  <html class="no-js lt-ie9 lt-ie8 ie7" lang="en">    <![endif]-->
<!--[if IE 8]>  <html class="no-js lt-ie9 ie8" lang="en">   <![endif]-->
<!--[if gt IE 8]><!-->  <html class="no-js" lang="en">  <!--<![endif]-->
<head>	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
	<meta name="language" content="en" />
	<title>Image gallery</title>
    <link rel="stylesheet" href="themes/global.css">
    <link rel="stylesheet" href="themes/main.css">
	<link rel="stylesheet" href="themes/gallery.css">

</head>
<body >
    <h1 class="page-header hidden">Image gallery</h1>
	<div id="page">
		<div id="container" >
            
            <div class="search-bar">
                <input type="text" class="search-text" placeholder="Type and hit enter to search" />
                <div class="tel"><img alt="telephone" src="themes/images/tel.png" width="18" height="18" />Call Us 0123-456789</div>
                <div class="clear"></div>
            </div>
            <div class="short-desc">
                <div class="short-wrap">
                    <div class="image-container"><img alt="over" src="data/images/p1.jpg"></div>
                    <div class="plus"></div>
                    <div class="content">
                        <h3 class="title">Password protected</h3>
                        <div class="detail">You do not have permission to asscess this project.Please register an account to have full permission</div>
                    </div>
                </div>
            </div>


            <script id="gallery-template" type="text/html">
               <ul class="gallery clear">
                   <div class="control-bar clear">
                    <img class="nav-icon" alt="" src="themes/images/previous.jpg" />
                    <img class="nav-icon" alt="" src="themes/images/viewmode.jpg" />
                    <img class="nav-icon" alt="" src="themes/images/next.jpg" />
                    </div>
                <#
                var l = data.length;
                var el;

                for (var i = 0; i < l; i++) {
                    el = data[i];                
                #>
                <li index="<#=i #>">
                    <a href="#"><img alt="" src="<#=el.photoUrl #>"></a>                    
                </li>
                <#
                }
                #>
                </ul>
            </script>
            
		</div>
        <div class="full-detail">
            <div class="wrapper">
                <div class="related-photo">
                    <img src="data/images/p1_1.jpg">                    
                </div>
                <div class="content">
                    <h3 class="title">The Navy</h3>
                    <div class="detail">You don't have permission to asscess this project.</div>
                    
                </div>
                <img class="close-button" src="themes/images/close.jpg" />
                <div class="slide-bar">
                    <img class="nav-icon prev" alt="" src="themes/images/circle-prev.jpg" />
                    <img class="nav-icon next" alt="" src="themes/images/circle-next.jpg" />
                    <div class="number-text">1 of 4</div>
                    <div class="clear-line"></div>
                </div>
                
                <div class="clear"></div>
            </div>
        </div>
        <div class="overlay"></div>
	</div>
    <script src="js/libs/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="js/libs/css3-mediaqueries.js" type="text/javascript"></script>
    <script src="js/libs/json2.js" type="text/javascript"></script>
    <script src="js/utils/utils.js" type="text/javascript"></script>

    <!-- components -->
    <script src="js/model/gallery-proxy.js" type="text/javascript"></script>
    <script src="js/view/gallery-controller.js" type="text/javascript"></script>
    <script src="js/page-controller.js" type="text/javascript"></script>
</body>
</html>